<template>
  <div class="wrapper">
    <header>
      <i class="fa fa-angle-left" @click="goback"></i>
      <p>选择性别</p>
    </header>

    <div class="change">

        <div class="sex" style="font-size: 5vw;">
          <input type="radio" v-model="user.userSex" value="1" style="width:6vw;height: 3.2vw;" class="man">男
          <input type="radio" v-model="user.userSex" value="0" style="width:6vw;height: 3.2vw;" class="woman"> 女
        </div>


      <div class="button-change">
        <button @click="ChangeSex">确认</button>
      </div>

    </div>


  </div>
</template>


<script>
export default {
  name: 'ChangeImg',
  data() {
    return {
      user: {}
    }
  },
  created() {
    this.user = this.$getSessionStorage('user');
    this.getUserInfo();
  },
  methods: {
    ChangeSex(){
      this.$axios.post('UserController/updateUserById', this.$qs.stringify(
          this.user
      )).then(response => {
        if (response.data > 0) {
          alert('选择成功！');
          this.getUserInfo(); // 获取最新的用户信息
          this.$router.go(-1);
        } else {
          alert('选择失败！');
        }
      }).catch(error => {
        console.error(error);
      });
    },
    goback() {
      this.$router.go(-1);
    },
    getUserInfo() {
      this.$axios.post('UserController/getUserById', this.$qs.stringify({
        userId: this.user.userId,
      })).then(response => {
        this.user = response.data;
        this.$setSessionStorage('user', this.user); // 保存最新的用户信息到会话存储
      }).catch(error => {
        console.error(error);
      });
    }
  }
}

</script>
<style scoped>
.wrapper header {
  width: 100%;
  height: 12vw;
  background: linear-gradient(#F37373, #F08080, #EF9292);
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;

}

.wrapper header i {
  margin-left: 6vw;
}

.wrapper header p {
  margin-left: 33vw;
}

/****************** 文字部分 ******************/
.wrapper .change {
  padding-top: 16vw;
}


/****************** 更改部分 ******************/
.wrapper .change .sex{
  box-sizing: border-box;
  padding: 4vw 3vw 2vw 3vw;
  display: flex;
  align-items: center;
}

.wrapper .change .sex .man {
  margin-left: 24vw;

}
.wrapper .change .sex .woman{
  margin-left: 20vw;
}


/****************** 按钮部分 ******************/
.wrapper .button-change {
  width: 100%;
  box-sizing: border-box;
  padding: 7vw 3vw 0 3vw;
}

.wrapper .button-change button {
  width: 100%;
  height: 10vw;
  font-size: 3.8vw;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(#F37373, #F08080, #EF9292);
  border-radius: 4px;
  border: none;
  outline: none;
}

</style>